<template>
    <div>
        <ul v-if="classifylist.length > 0">
            <router-link
                tag="li"
                :to="`/details/${item.season_id || item.id}`"
                v-for="item in classifylist"
                :key="item.season_id || item.id"
            >
                <van-image
                    width="27.5vw"
                    height="36.5vw"
                    lazy-load
                    fit="cover"
                    :src="`${item.vertical_cover}@100w.jpg`"
                />
                <h3>{{ item.title }}</h3>
                <p v-if="item.last_ord == item.total">[完结]共{{ item.last_ord }}话</p>
                <p v-else>更新至{{ item.last_short_title }}话</p>
            </router-link>
        </ul>
    </div>
</template>

<script>
export default {
    props: {
        classifylist: {
            type: Array,
            define: () => {
                return [];
            },
        },
    },
};
</script>

<style lang="scss" scoped>
ul {
    display: flex;
    flex-wrap: wrap;
    li {
        width: 30%;
        padding: 8px 5px;
        width: 27.5vw;
        /* img {
            width: 100%;
            height: 137px;
        } */
        h3 {
            font-size: 14px;
            color: #222;
            // margin-top: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        p {
            font-size: 12px;
            color: #999;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    .addmore {
        width: 27.5vw;
        height: 36.5vw;
        padding-top: 5px;
        padding-left: 5px;
    }
}
.readHistor {
    position: relative;
    text-align: center;
    top: 150px;
}
.addmore {
    width: 27.5vw;
    height: 36.5vw;
    padding-top: 5px;
    padding-left: 5px;
}
.loading {
    position: relative;
    left: 0;
    right: 0;
    top: 100px;
}
</style>
